<template>
  <div class="approve" id="approve">
    <div class="steps">
      <a-steps
        :current="current"
        type="navigation"
        @change="change"
        style="width: 600px"
      >
        <a-step status="finish" title="组件管理" />
        <a-step status="process" title="工作流程" />
        <a-step status="wait" title="通知管理" />
      </a-steps>
    </div>
    <!--  -->
    <analysis-poup ref="analysisPoupRef" />

    <!-- <analysis-table ref="analysisTableRef"/> -->


  </div>
</template>
<script>
import AnalysisPoup from "./components/analysis-poup";
// import AnalysisTable from "./components/table";

export default {
  components: {
    AnalysisPoup,
    // AnalysisTable,
  },
  data() {
    return {
      current: 1,
    };
  },
  watch: {
    $route: {
      handler() {
        // console.log(path);
        // console.log(matched);
        console.log(this.$route.meta.id);
      },
      immediate: true,
    },
  },
  methods: {
    change(e) {
      this.$refs.analysisPoupRef.visible = true;
      this.current = e;
    },
  },
};
</script>

<style lang="less" scoped>
.approve {
  //   background-color: #f3f4f7;
  min-height: 100%;
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  .steps {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 5px;
  }

}
</style>